<template>
  <a-modal :open="open" width="1300px" :title="title" centered @ok="onOk" @cancel="onCancel">
    <a-form :model="formState" :colon="false">
      <a-form-item name="bh" label="药品编号" class="w-1/3">
        <a-input v-model:value="formState.bh" disabled placeholder="请输入" />
      </a-form-item>
      <a-form-item name="mc" label="药品名称" class="w-1/3">
        <a-input v-model:value="formState.mc" placeholder="请输入" />
      </a-form-item>
      <a-form-item name="spm" label="商品名" class="w-1/3">
        <a-input v-model:value="formState.spm" placeholder="请输入" />
      </a-form-item>
      <a-form-item name="tym" label="通用名" class="w-1/3">
        <a-input v-model:value="formState.tym" placeholder="请输入" />
      </a-form-item>
      <a-form-item name="pyjm" label="拼音简码" class="w-1/3">
        <a-input v-model:value="formState.pyjm" placeholder="请输入" />
      </a-form-item>
      <a-form-item name="gg" label="规格" class="w-1/3">
        <a-input v-model:value="formState.gg" placeholder="请输入" />
      </a-form-item>
      <a-form-item name="zxdw" label="最小单位" class="w-1/3">
        <a-input v-model:value="formState.zxdw" placeholder="请输入" />
      </a-form-item>
      <a-form-item name="dj" label="单价" class="w-1/3">
        <a-input v-model:value="formState.dj" placeholder="请输入" />
      </a-form-item>
      <a-form-item name="dw" label="单位" class="w-1/3">
        <a-input v-model:value="formState.dw" placeholder="请输入" />
      </a-form-item>
      <a-form-item name="zdjl" label="最大剂量" class="w-1/3">
        <a-input v-model:value="formState.zdjl" placeholder="请输入" />
      </a-form-item>
      <a-form-item name="zxgg" label="最小规格" class="w-1/3">
        <a-input v-model:value="formState.zxgg" placeholder="请输入" />
      </a-form-item>
      <a-form-item name="zsb" label="整散比" class="w-1/3">
        <a-input v-model:value="formState.zsb" placeholder="请输入" />
      </a-form-item>

      <a-form-item name="jldw" label="剂量单位" class="w-1/3">
        <a-input v-model:value="formState.jldw" placeholder="请输入" />
      </a-form-item>
      <a-form-item name="jlb" label="剂量换算" class="w-1/3">
        <a-input v-model:value="formState.jlb" placeholder="请输入" />
      </a-form-item>
      <a-form-item name="aqkc" label="安全库" class="w-1/3">
        <a-input v-model:value="formState.aqkc" placeholder="请输入" />
      </a-form-item>
      <a-form-item name="ylfl" label="药理分类" class="w-1/3">
        <SelectItem v-model:value="formState.ylfl" type="DT00026" placeholder="请选择" allow-clear />
      </a-form-item>
      <a-form-item name="xmlb" label="药品类别" class="w-1/3">
        <!-- <Select v-model:value="formState.xmlb" type="药品类别" /> -->
        <a-radio-group v-model:value="formState.xmlb" value="1">
          <a-radio :value="2">西药费</a-radio>
          <a-radio :value="4">中成药费</a-radio>
          <a-radio :value="5">中药费</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item name="" label="" class="w-1/3 pl-20">
        <a-checkbox v-model:checked="formState.psbzs" class="">是否皮试</a-checkbox>
        <a-checkbox v-model:checked="sffywz">防疫物资</a-checkbox>
        <a-checkbox v-model:checked="formState.sfpjs">片剂药品</a-checkbox>
      </a-form-item>

      <a-form-item name="yplx" label="剂量单位" class="w-1/2">
        <a-radio-group v-model:value="formState.yplx" value="1">
          <a-radio :value="1">普通药品</a-radio>
          <a-radio :value="2">I类精神药品</a-radio>
          <a-radio :value="3">II类精神药品</a-radio>
          <a-radio :value="4">麻醉药品</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item name="syzd" label="使用指导" class="w-full">
        <a-textarea v-model:value="formState.syzd" :row="4" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
import SelectItem from '@/components/SelectItem'

const emit = defineEmits(['update:open', 'update:value', 'success'])
const props = defineProps({
  open: Boolean,
  rowData: {
    type: Object,
    default: () => ({})
  },
  title: {
    type: String,
    default: ''
  }
})
const formState = ref({})

watch(
  () => props.open,
  (val) => {
    if (val) {
      const rowData2 = {
        psbzs: props.rowData.psbz ? 1 : 0,
        sfpjs: props.rowData.sfpj ? 1 : 0,
        ...props.rowData
      }
      formState.value = rowData2
    }
  }
)
const onOk = async () => {
  const formData = {
    psbz: formState.value.psbzs ? 1 : 0,
    sfpj: formState.value.sfpjs ? 1 : 0,
    ...formState.value
  }
  const res = await post('/operation/dictionary/doSaveDrugInfo', formData)
  if (res.code === 0) {
    message.success(res.msg)
    emit('success')
  } else {
    message.error(res.msg)
  }
}

const onCancel = () => {
  emit('update:open', false)
}
</script>
<style lang="less" scoped>
:deep(.ant-list-items) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .ant-list-item {
    justify-content: center;
    width: 100px;
    height: 60px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid #eee !important;
    border-radius: 8px;
    cursor: pointer;
    &:hover {
      background-color: #3758f110;
    }
    &.active {
      color: #fff;
      background-color: #3758f1;
      &:hover {
        background-color: #3758f1;
      }
    }
  }
}

.ant-form {
  display: flex;
  flex-flow: row wrap;
  min-width: 0;
  :deep(.ant-form-item) {
    .ant-form-item-label {
      width: 80px;
    }
  }
  .ant-picker {
    width: 100%;
  }
}
</style>
